<script setup lang="ts">
import MyItem from "@/components/MyItem.vue";
import {Todo} from "@/commons/todo";

/*
      ts 中的 defineProps 等有三种写法
         1. 和js一样直接在 defineProps({直接在这里面写})

         2. 用 ts 特性, 如下面就是, 在泛型规范中声明即可 defineProps<{这里面写}>()

         3. 第三种方式则是结合上面两种, 同时需要使用 withDefaults 方法, 这种方式主要是给指定属性添加默认值
            首先定义一个接口规范
             interface Props {
                either: '必传且限定'|'其中一个'|'值', // 利用TS：限定父组件传 either 的值
                child: string|number,
                sda?: string, // 未设置默认值，为 undefined
                strData: string,
                msg?: string
                labels?: string[],
                obj?:{a:number}
              }
            接下来, 在defineProps<写入上述的规范>(), 在使用 withDefaults(defineProps(), {添加需要属性的默认值})
              const props = withDefaults(defineProps<Props>(), {
                msg: 'hello',
                labels: () => ['one', 'two'],
                obj: () => { return {a:2} }
              })

 */

// 这里 只是展示下vue3中defineProps在ts中如何写, 实际业务别这么写, 用事件总线比较方便(mitt参考js版)
defineProps<{todos: Todo[], delTodo: Function, updateTodo: Function}>()

</script>

<template>
  <ul class="todo-main">
    <MyItem v-for="(todo, index) in todos " :key="todo.id" :todo="todo" :delTodo="delTodo" :index="index" :updateTodo="updateTodo"/>
  </ul>
</template>

<style scoped>
.todo-main {
  margin-left: 0;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0;
}
.todo-empty{
  height: 40px;
  line-height: 20px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}
</style>
